<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../../js/mui.min.js"></script>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			body {
				background: white;
			}
			
			.content {
				display:flex;
				/*justify-content:center;
				align-items:center;*/
				margin-top: 12%;
			}
			
			.image-part {
				float: left;
				width: 50%;
			}
			
			.message-part {
				width: 45%;
				margin-top:12% ;
				margin-left: 5%;
			}
			
			.mes {
				padding-top: 5% ;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">个人中心</h1>
		</header>
		
		<div class="content" >
			<div class="image-part">
				<img src="../../images/profile-photo.png" />
			</div>
			<div class="message-part">
				<div class="mes" id="realName"></div>
				<div class="mes" id="departName"></div>
				<div class="mes" id="mobilPhone"></div>
				<div class="mes" id="email"></div>
			</div>
		</div>
		
		<h3 style="text-align: center;">使用帮助</h3>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="#">
						登录
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						消息通知
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						天气预报
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="disaster_detail.html">
						灾害预报
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						气象站
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						更新程序
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						修改个人信息
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						忘记密码
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						技术支持
					</a>
				</li>
			</ul>

<script>
//	plus.storage.getItem("departName", departName);
	mui.plusReady(function(){
		document.getElementById('realName').innerHTML = plus.storage.getItem("realName");
		document.getElementById('departName').innerHTML = plus.storage.getItem("departName");

		document.getElementById('mobilPhone').innerHTML = plus.storage.getItem("mobilPhone");

		document.getElementById('email').innerHTML = plus.storage.getItem("email");
//		
	});

</script>
</html>
